$(function(){

    // 记录当前页和页码
    var currentPage = 1;
    var pageSize = 5;

    // 渲染页面
    function render(){
        $.ajax({
            url: "/category/querySecondCategoryPaging",
            data: {
                page: currentPage,
                pageSize: pageSize
            },
            dataType: "json",
            success: function(result){
                // 动态渲染数据
                $("tbody").html(template("temp-second",result));
                // 动态生成分页
                setPage(result.total);
            }
        });
    }
    render();

    // 动态生成分页
    function setPage(total){
        $("#paginator").bootstrapPaginator({
            bootstrapMajorVersion: 3,//默认是2，如果是bootstrap3版本，这个参数必填
            currentPage: currentPage,//当前页
            totalPages: Math.ceil(total/pageSize),//总页数
            onPageClicked: function (event, originalEvent, type, page) {
                // 渲染当前页
                currentPage = page;
                render();
            }
        });
    }

    // 动态填充二级下拉菜单列表
    $.ajax({
        url: "/category/queryTopCategoryPaging",
        data: {
            page: currentPage,
            pageSize: 100
        },
        dataType: "json",
        success: function(result){
            // 动态渲染下拉菜单
            $(".second-list").html(template("temp-list",result));
        }
    });

    // 点击下拉菜单的数据, 将选中的内容赋值给按钮, 并将选中的数据ID存入到隐藏域
    $(".second-list").on("click","a", function(){
        // 将当前选中的文字赋值给下拉按钮
        $(".caret-title").text($(this).text());
        // 将选中的数据的id存入到隐藏域中
        $('[name="categoryId"]').val($(this).data("id"));
        // 如果下拉菜单title选中内容, 将其验证状态设置为验证通过
        $("#form1").data('bootstrapValidator').updateStatus("categoryId", "VALID");
    });

    //上传品牌图片
    $("#fileupload").fileupload({
        dataType: "json",
        //e：事件对象
        //data：图片上传后的对象，通过data.result.picAddr可以获取上传后的图片地址
        done: function (e, data) {
            console.log(data.result.picAddr);
            var url = data.result.picAddr;
            $("#img").attr("src",url);
            // 把保存到服务器中的图片地址赋值给隐藏域
            $('[name="brandLogo"]').val(url);
            // 将图片的上传状态设置为验证通过
            $("#form1").data('bootstrapValidator').updateStatus("brandLogo", "VALID");
        }
    });

    // 表单验证
    $("#form1").bootstrapValidator({
        //1. 指定不校验的类型，默认为[':disabled', ':hidden', ':not(:visible)'],可以不设置
        excluded: [],

        //2. 指定校验时的图标显示，默认是bootstrap风格
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        // 校验字段
        fields: {
            // 校验属性
            brandName: {
                // 校验规则
                validators: {
                    notEmpty: {
                        message: "请输入二级分类"
                    }
                }
            },
            categoryId: {
                // 校验规则
                validators: {
                    notEmpty: {
                        message: "请选择一个分类"
                    }
                }
            },
            brandLogo: {
                // 校验规则
                validators: {
                    notEmpty: {
                        message: "请上传一个图片"
                    }
                }
            }
        }
    });

    // 添加二级分类
    $("#form1").on('success.form.bv', function (e) {
        e.preventDefault();
        //使用ajax提交逻辑
        $.ajax({
            url: "/category/addSecondCategory",
            type: "post",
            data: $("#form1").serialize(),
            dataType: "json",
            success: function(result){
                if(result.success){
                    // 隐藏模态框
                    $(".modal-add").modal("hide");
                    // 渲染第一页
                    currentPage = 1;
                    render();
                    // 清空表单数据
                    $("#form1").data('bootstrapValidator').resetForm(true);
                    // 手动重置分类和图片
                    $(".caret-title").text("请选择一个分类");
                    $("#img").attr("src","./images/none.png");
                }
            }
        });
    });

});